import React, { useState, useEffect } from 'react';
import PanelListTotal from '@/components/PanelListTotal';
import { t } from '@lingui/macro';
import { Box, Divider } from '@alifd/next';
import { useStore } from '@/hooks';
import dayjs from 'dayjs';
import { observer } from 'mobx-react-lite';

const RangePreset = {};
RangePreset[t`昨日`] = [dayjs().subtract(1, 'day'), dayjs()];
RangePreset[t`近一周`] = [dayjs().add(-7, 'day'), dayjs()];
RangePreset[t`近二周`] = [dayjs().add(-15, 'day'), dayjs()];

const TopList = ({ data }) => {
  const [state, setState] = useState([]);
  const { activityStore: store, ruleStore } = useStore();

  useEffect(() => {
    const { clickCount, registerCount, orderCount, saleCount, costCount, sourceCount } = data || {};
    const left = [
      { title: t`活动总数`, value: sourceCount, UC: null },
      { title: t`点击总量`, value: clickCount, UC: null },
      { title: t`注册总量`, value: registerCount, UC: null },
      { title: t`下单总量`, value: orderCount, UC: null },
      { title: t`活动销售额`, value: saleCount, UC: 1 },
      { title: t`活动成本`, value: costCount, UC: 1 },
    ];
    setState(left);
  }, [data]);

  return (
    <>
      <Box direction="row" >
        <Box style={{ padding: '20px' }}>
          <PanelListTotal data={state} width={'85vw'} />
        </Box>
      </Box>
      <Divider />
    </>
  );
};

export default observer(TopList);
